<!--  -->
<template>
  <div>
    <div ref="chart" class="position-center" :style="{ width: width, height: height }"></div>
  </div>
</template>

<script lang="ts" setup>
  import { nextTick, onMounted, Prop, ref, watch } from 'vue'
  import * as echarts from 'echarts'
  import { getBarOption } from '@/utils/options'

  interface Props {
    data: number[]
    axisData: string[]
    isXAxis?:boolean
    width: string
    height: string
  }

  const chart = ref()
  const props = defineProps<Props>()

  const renderChart = () => {
    let {data, axisData, isXAxis} = props;
    echarts.dispose(chart.value)
    const option = getBarOption(data, axisData, isXAxis)
    const eChart = echarts.init(chart.value)
    eChart.setOption(option)
  }

  watch(props, ()=> {
    renderChart()
  }, {
    deep:true
  })

  onMounted(() => {
    nextTick(() => {
      renderChart()
    })
  })
</script>
<style lang="scss" scoped></style>
